<template>
  <div>
    <el-dialog title="媒体播放" :visible.sync="showVideo" width="600px" :before-close="cancel">
      <video :src="playUrl" controls autoplay controlslist="nodownload" style="width: 100%; height: 100%">
        <track default kind="captions" :src="playUrl">
      </video>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Video',
  props: {
    showVideo: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    playUrl: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    showVideo: {
      handler(val) {
        console.log(val, 'val/...............')
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('handleHideModal')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dialog__body{
  height: 400px;
}
</style>

